<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import AuthService from '../services/AuthService.js'

const router = useRouter()
const route = useRoute()
const productId = ref('')
const product = ref(null)
const loading = ref(true)
const error = ref('')

// 模拟产品数据
const mockProducts = [
  {
    id: '1',
    name: '时尚运动鞋',
    price: 399,
    originalPrice: 499,
    discount: '8折',
    images: [
      'https://via.placeholder.com/600x600?text=Sports+Shoes+1',
      'https://via.placeholder.com/600x600?text=Sports+Shoes+2',
      'https://via.placeholder.com/600x600?text=Sports+Shoes+3',
      'https://via.placeholder.com/600x600?text=Sports+Shoes+4'
    ],
    colors: ['黑色', '白色', '蓝色', '灰色'],
    sizes: ['36', '37', '38', '39', '40', '41', '42', '43'],
    description: '这款时尚运动鞋采用轻便透气的网面材质，提供出色的舒适性和支撑力。减震鞋底设计，适合长时间行走和运动。简约时尚的外观，适合各种日常搭配。',
    specifications: [
      { name: '材质', value: '网面+橡胶底' },
      { name: '重量', value: '约350g' },
      { name: '适用场景', value: '日常穿着、运动' },
      { name: '保养方法', value: '建议手洗，阴干' }
    ],
    stock: 120,
    rating: 4.8,
    reviews: 128,
    category: '运动鞋'
  },
  {
    id: '2',
    name: '智能手表',
    price: 899,
    originalPrice: 1099,
    discount: '8.2折',
    images: [
      'https://via.placeholder.com/600x600?text=Smart+Watch+1',
      'https://via.placeholder.com/600x600?text=Smart+Watch+2',
      'https://via.placeholder.com/600x600?text=Smart+Watch+3',
      'https://via.placeholder.com/600x600?text=Smart+Watch+4'
    ],
    colors: ['黑色', '银色', '玫瑰金'],
    description: '这款智能手表支持心率监测、血氧检测、睡眠监测等多种健康功能。内置GPS，支持多种运动模式。50米防水，续航可达14天。支持NFC支付，消息提醒等智能功能。',
    specifications: [
      { name: '屏幕尺寸', value: '1.4英寸 AMOLED' },
      { name: '电池容量', value: '340mAh' },
      { name: '防水等级', value: '5ATM' },
      { name: '连接方式', value: '蓝牙5.0, WiFi' }
    ],
    stock: 85,
    rating: 4.9,
    reviews: 236,
    category: '智能设备'
  },
  {
    id: '3',
    name: '无线耳机',
    price: 599,
    originalPrice: 699,
    discount: '8.6折',
    images: [
      'https://via.placeholder.com/600x600?text=Wireless+Headphones+1',
      'https://via.placeholder.com/600x600?text=Wireless+Headphones+2',
      'https://via.placeholder.com/600x600?text=Wireless+Headphones+3',
      'https://via.placeholder.com/600x600?text=Wireless+Headphones+4'
    ],
    colors: ['黑色', '白色'],
    description: '这款无线耳机采用主动降噪技术，有效隔绝环境噪音。高保真音质，低音浑厚，高音清晰。单耳续航可达8小时，搭配充电盒总续航可达32小时。支持触控操作，IPX4防水。',
    specifications: [
      { name: '驱动单元', value: '10mm' },
      { name: '频率响应', value: '20Hz-20kHz' },
      { name: '蓝牙版本', value: 'Bluetooth 5.2' },
      { name: '防水等级', value: 'IPX4' }
    ],
    stock: 150,
    rating: 4.7,
    reviews: 189,
    category: '音频设备'
  },
  {
    id: '4',
    name: '轻薄笔记本',
    price: 5999,
    originalPrice: 6599,
    discount: '9.1折',
    images: [
      'https://via.placeholder.com/600x600?text=Thin+Laptop+1',
      'https://via.placeholder.com/600x600?text=Thin+Laptop+2',
      'https://via.placeholder.com/600x600?text=Thin+Laptop+3',
      'https://via.placeholder.com/600x600?text=Thin+Laptop+4'
    ],
    colors: ['银色', '深空灰'],
    description: '这款轻薄笔记本采用全金属机身设计，重量仅为1.2kg，厚度15.6mm。配备最新处理器，性能强劲，续航长达12小时。14英寸2.5K高分辨率屏幕，显示效果细腻。支持快速充电，30分钟可充至50%电量。',
    specifications: [
      { name: '处理器', value: 'Intel Core i7' },
      { name: '内存', value: '16GB LPDDR4X' },
      { name: '存储', value: '512GB SSD' },
      { name: '屏幕', value: '14英寸 2.5K' }
    ],
    stock: 45,
    rating: 4.9,
    reviews: 98,
    category: '电脑设备'
  }
]

// 当前选中的图片、颜色和尺寸
const selectedImage = ref('')
const selectedColor = ref('')
const selectedSize = ref('')
const quantity = ref(1)

// 加载产品详情
const loadProductDetails = async () => {
  try {
    // 检查登录状态
    if (!AuthService.isLoggedIn()) {
      // 跳转到登录页面
      window.location.href = '/shop-login'
      return
    }
    
    loading.value = true
    productId.value = route.params.id
    
    // 模拟网络请求延迟
    await new Promise(resolve => setTimeout(resolve, 800))
    
    // 查找对应的产品
    const foundProduct = mockProducts.find(p => p.id === productId.value)
    
    if (foundProduct) {
      product.value = foundProduct
      selectedImage.value = foundProduct.images[0]
      selectedColor.value = foundProduct.colors[0]
      if (foundProduct.sizes && foundProduct.sizes.length > 0) {
        selectedSize.value = foundProduct.sizes[0]
      }
      error.value = ''
    } else {
      error.value = '找不到该产品'
    }
  } catch (err) {
    error.value = '加载产品详情失败'
    console.error('加载产品详情错误:', err)
  } finally {
    loading.value = false
  }
}

// 切换选中的图片
const changeSelectedImage = (image) => {
  selectedImage.value = image
}

// 切换选中的颜色
const changeSelectedColor = (color) => {
  selectedColor.value = color
}

// 切换选中的尺寸
const changeSelectedSize = (size) => {
  selectedSize.value = size
}

// 增加数量
const increaseQuantity = () => {
  if (product.value && quantity.value < product.value.stock) {
    quantity.value++
  }
}

// 减少数量
const decreaseQuantity = () => {
  if (quantity.value > 1) {
    quantity.value--
  }
}

// 加入购物车
const addToCart = () => {
  if (!product.value || quantity.value <= 0) return
  
  // 在真实应用中，这里应该调用API将商品加入购物车
  const cartItem = {
    id: product.value.id,
    name: product.value.name,
    price: product.value.price,
    image: selectedImage.value,
    color: selectedColor.value,
    size: selectedSize.value,
    quantity: quantity.value
  }
  
  console.log('加入购物车:', cartItem)
  
  // 模拟成功提示
  alert('商品已成功加入购物车！')
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 页面加载时获取产品详情
onMounted(() => {
  loadProductDetails()
})
</script>

<template>
  <div class="product-detail">
    <!-- 导航栏 -->
    <nav class="shop-nav">
      <div class="nav-container">
        <div class="nav-left">
          <button class="back-button" @click="goBack">
            <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <line x1="19" y1="12" x2="5" y2="12"></line>
              <polyline points="12 19 5 12 12 5"></polyline>
            </svg>
          </button>
          <div class="shop-logo">
            <svg viewBox="0 0 24 24" width="24" height="24" stroke="#4caf50" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="9" cy="21" r="1"></circle>
              <circle cx="20" cy="21" r="1"></circle>
              <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
            </svg>
            <span>ShopApp</span>
          </div>
        </div>
      </div>
    </nav>

    <!-- 产品详情内容 -->
    <div class="product-detail-content">
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <div class="loading-spinner"></div>
        <p>加载中...</p>
      </div>

      <!-- 错误状态 -->
      <div v-else-if="error" class="error-container">
        <p>{{ error }}</p>
        <button class="back-to-home" @click="router.push('/shop')">返回首页</button>
      </div>

      <!-- 产品信息 -->
      <div v-else-if="product" class="product-info-container">
        <div class="product-images-section">
          <!-- 缩略图列表 -->
          <div class="thumbnail-list">
            <div 
              v-for="image in product.images" 
              :key="image"
              class="thumbnail-item"
              :class="{ active: selectedImage === image }"
              @click="changeSelectedImage(image)"
            >
              <img :src="image" :alt="product.name" />
            </div>
          </div>
          
          <!-- 主图片 -->
          <div class="main-image">
            <img :src="selectedImage" :alt="product.name" />
          </div>
        </div>

        <div class="product-details-section">
          <!-- 产品基本信息 -->
          <div class="product-basic-info">
            <h1 class="product-name">{{ product.name }}</h1>
            <div class="product-rating">
              <div class="stars">
                <span v-for="n in 5" :key="n" class="star" :class="{ active: n <= Math.floor(product.rating) }">
                  ★
                </span>
              </div>
              <span class="rating-text">{{ product.rating }} ({{ product.reviews }} 评价)</span>
            </div>
            <div class="product-price-section">
              <div class="price-container">
                <span class="current-price">¥{{ product.price }}</span>
                <span v-if="product.originalPrice" class="original-price">¥{{ product.originalPrice }}</span>
                <span v-if="product.discount" class="discount-tag">{{ product.discount }}</span>
              </div>
            </div>
            <div class="product-stock">
              <span>库存: {{ product.stock }} 件</span>
            </div>
            <p class="product-brief-description">{{ product.description.substring(0, 100) }}...</p>
          </div>

          <!-- 产品选项 -->
          <div class="product-options">
            <!-- 颜色选择 -->
            <div v-if="product.colors && product.colors.length > 0" class="option-group">
              <label>颜色</label>
              <div class="color-options">
                <button 
                  v-for="color in product.colors" 
                  :key="color"
                  class="color-option"
                  :class="{ selected: selectedColor === color }"
                  :style="{ backgroundColor: getColorValue(color) }"
                  @click="changeSelectedColor(color)"
                >
                  {{ color }}
                </button>
              </div>
            </div>

            <!-- 尺寸选择 -->
            <div v-if="product.sizes && product.sizes.length > 0" class="option-group">
              <label>尺寸</label>
              <div class="size-options">
                <button 
                  v-for="size in product.sizes" 
                  :key="size"
                  class="size-option"
                  :class="{ selected: selectedSize === size }"
                  @click="changeSelectedSize(size)"
                >
                  {{ size }}
                </button>
              </div>
            </div>

            <!-- 数量选择 -->
            <div class="option-group">
              <label>数量</label>
              <div class="quantity-selector">
                <button class="quantity-button minus" @click="decreaseQuantity" :disabled="quantity <= 1">
                  -
                </button>
                <span class="quantity-value">{{ quantity }}</span>
                <button class="quantity-button plus" @click="increaseQuantity" :disabled="product && quantity >= product.stock">
                  +
                </button>
              </div>
            </div>
          </div>

          <!-- 购买按钮 -->
          <div class="purchase-buttons">
            <button class="add-to-cart" @click="addToCart">
              加入购物车
            </button>
            <button class="buy-now">
              立即购买
            </button>
          </div>

          <!-- 配送信息 -->
          <div class="shipping-info">
            <div class="shipping-item">
              <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"></circle>
                <polyline points="12 6 12 12 16 14"></polyline>
              </svg>
              <span>免运费</span>
            </div>
            <div class="shipping-item">
              <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path d="M21 10V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 18v-2z"></path>
                <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
                <line x1="12" y1="22.08" x2="12" y2="12"></line>
              </svg>
              <span>7天无理由退换</span>
            </div>
            <div class="shipping-item">
              <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
              </svg>
              <span>正品保障</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 产品详情标签页 -->
    <div v-if="product && !loading && !error" class="product-details-tabs">
      <div class="tabs-header">
        <button class="tab-button active">商品详情</button>
        <button class="tab-button">规格参数</button>
        <button class="tab-button">用户评价</button>
      </div>
      <div class="tabs-content">
        <div class="tab-panel active">
          <div class="product-full-description">
            <h3>产品详情</h3>
            <p>{{ product.description }}</p>
            <!-- 产品详情图片 -->
            <div class="detail-images">
              <img v-for="image in product.images" :key="image" :src="image" :alt="product.name + '详情'" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="shop-footer">
      <div class="footer-content">
        <div class="footer-column">
          <h3>ShopApp</h3>
          <p>为您提供最好的购物体验</p>
        </div>
        <div class="footer-column">
          <h4>快速链接</h4>
          <ul>
            <li>首页</li>
            <li>商品分类</li>
            <li>新品上市</li>
            <li>特惠活动</li>
          </ul>
        </div>
        <div class="footer-column">
          <h4>客户服务</h4>
          <ul>
            <li>联系我们</li>
            <li>常见问题</li>
            <li>退换政策</li>
            <li>隐私政策</li>
          </ul>
        </div>
      </div>
      <div class="footer-bottom">
        <p>&copy; 2024 ShopApp. 保留所有权利。</p>
      </div>
    </footer>
  </div>
</template>

<style scoped>
.product-detail {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 导航栏样式 */
.shop-nav {
  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-container {
  display: flex;
  align-items: center;
  padding: 0 40px;
  height: 64px;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.back-button {
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.back-button:hover {
  background-color: #f5f5f5;
}

.nav-left .shop-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4caf50;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
}

/* 产品详情内容 */
.product-detail-content {
  flex: 1;
  padding: 40px;
}

.loading-container, .error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #4caf50;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.error-container p {
  font-size: 16px;
  color: #c62828;
  margin-bottom: 16px;
}

.back-to-home {
  background-color: #4caf50;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.back-to-home:hover {
  background-color: #45a049;
}

.product-info-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

/* 产品图片部分 */
.product-images-section {
  display: flex;
  gap: 20px;
}

.thumbnail-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.thumbnail-item {
  width: 80px;
  height: 80px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.thumbnail-item:hover, .thumbnail-item.active {
  border-color: #4caf50;
}

.thumbnail-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-image {
  flex: 1;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
}

.main-image img {
  max-width: 100%;
  max-height: 500px;
  object-fit: contain;
}

/* 产品详情部分 */
.product-details-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.product-basic-info h1 {
  font-size: 28px;
  color: #333;
  font-weight: 700;
  margin-bottom: 16px;
}

.product-rating {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.stars {
  display: flex;
  gap: 4px;
}

.star {
  color: #ddd;
  font-size: 16px;
}

.star.active {
  color: #ffb400;
}

.rating-text {
  font-size: 14px;
  color: #666;
}

.price-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.current-price {
  font-size: 32px;
  font-weight: 700;
  color: #e53935;
}

.original-price {
  font-size: 16px;
  color: #999;
  text-decoration: line-through;
}

.discount-tag {
  background-color: #e53935;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.product-stock {
  font-size: 14px;
  color: #4caf50;
  margin-bottom: 16px;
}

.product-brief-description {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

/* 产品选项 */
.product-options {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.option-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.color-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.color-option {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.color-option:hover {
  border-color: #4caf50;
}

.color-option.selected {
  border-color: #4caf50;
  background-color: #f1f8e9;
  color: #4caf50;
}

.size-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.size-option {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.size-option:hover {
  border-color: #4caf50;
}

.size-option.selected {
  border-color: #4caf50;
  background-color: #f1f8e9;
  color: #4caf50;
}

.quantity-selector {
  display: flex;
  align-items: center;
  gap: 16px;
}

.quantity-button {
  width: 32px;
  height: 32px;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quantity-button:hover:not(:disabled) {
  border-color: #4caf50;
  color: #4caf50;
}

.quantity-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.quantity-value {
  font-size: 16px;
  font-weight: 600;
  min-width: 40px;
  text-align: center;
}

/* 购买按钮 */
.purchase-buttons {
  display: flex;
  gap: 16px;
  margin-top: 24px;
}

.add-to-cart, .buy-now {
  flex: 1;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.add-to-cart {
  background-color: #4caf50;
  color: white;
}

.add-to-cart:hover {
  background-color: #45a049;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.buy-now {
  background-color: #ff9800;
  color: white;
}

.buy-now:hover {
  background-color: #f57c00;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}

/* 配送信息 */
.shipping-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.shipping-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #666;
}

/* 产品详情标签页 */
.product-details-tabs {
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 0 40px;
}

.tabs-header {
  display: flex;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 24px;
}

.tab-button {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 500;
  border: none;
  background: none;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.tab-button:hover {
  color: #4caf50;
}

.tab-button.active {
  color: #4caf50;
}

.tab-button.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #4caf50;
}

.tabs-content {
  min-height: 300px;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.product-full-description h3 {
  font-size: 20px;
  color: #333;
  margin-bottom: 16px;
}

.product-full-description p {
  font-size: 16px;
  line-height: 1.8;
  color: #666;
  margin-bottom: 24px;
}

.detail-images {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-images img {
  width: 100%;
  border-radius: 8px;
}

/* 页脚样式 */
.shop-footer {
  background-color: #333;
  color: white;
  padding: 40px;
  margin-top: auto;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
}

.footer-column {
  flex: 1;
}

.footer-column h3 {
  font-size: 24px;
  margin-bottom: 16px;
  color: #4caf50;
}

.footer-column h4 {
  font-size: 16px;
  margin-bottom: 16px;
  font-weight: 600;
}

.footer-column p {
  color: #ccc;
  line-height: 1.6;
}

.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column ul li {
  margin-bottom: 12px;
  color: #ccc;
  cursor: pointer;
  transition: color 0.3s ease;
}

.footer-column ul li:hover {
  color: #4caf50;
}

.footer-bottom {
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid #444;
  color: #999;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .product-info-container {
    grid-template-columns: 1fr;
  }
  
  .product-images-section {
    flex-direction: column-reverse;
  }
  
  .thumbnail-list {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 8px;
  }
  
  .thumbnail-item {
    flex-shrink: 0;
  }
}

@media (max-width: 768px) {
  .nav-container {
    padding: 0 20px;
  }
  
  .product-detail-content {
    padding: 20px;
  }
  
  .product-details-tabs {
    padding: 0 20px;
  }
  
  .purchase-buttons {
    flex-direction: column;
  }
  
  .footer-content {
    flex-direction: column;
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .nav-container {
    padding: 0 12px;
  }
  
  .product-detail-content {
    padding: 12px;
  }
  
  .product-details-tabs {
    padding: 0 12px;
  }
  
  .product-basic-info h1 {
    font-size: 24px;
  }
  
  .current-price {
    font-size: 28px;
  }
}
</style>